<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <el-select
            v-model="condition.status"
            clearable
            placeholder="订单状态"
            style="width: 150px"
            :empty-values="[null, undefined]"
            :value-on-clear="null"
            @change="getTableDate(1)"
        >
          <el-option label="未支付" :value="0"/>
          <el-option label="已支付" :value="1"/>
          <el-option label="已发货" :value="2"/>
          <el-option label="已收货" :value="3"/>
          <el-option label="退货退款" :value="4"/>
          <el-option label="退换货" :value="5"/>
          <el-option label="仅退款" :value="6"/>
          <el-option label="售后" :value="7"/>
          <el-option label="其它" :value="8"/>
        </el-select>
        <el-select
            v-model="condition.payType"
            clearable
            placeholder="支付方式"
            style="width: 150px"
            :empty-values="[null, undefined]"
            :value-on-clear="null"
            @change="getTableDate(1)"
        >
          <el-option label="未支付" :value="null"/>
          <el-option label="余额支付" :value="0"/>
          <el-option label="支付宝" :value="1"/>
          <el-option label="微信" :value="2"/>
          <el-option label="银联" :value="3"/>
          <el-option label="其它" :value="4"/>
        </el-select>
      </div>
    </template>
    <el-table :data="tableDate.list" style="width: 100%">
      <el-table-column prop="id" label="订单编号"/>
      <el-table-column prop="userId" label="用户ID"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="express" label="快递单号"/>
      <el-table-column prop="addrId" label="地址的ID"/>
      <el-table-column prop="addrDetail" label="那一会地址"/>
      <el-table-column prop="payType" label="支付方式">
        <template #default="scope">
          <el-tag v-if="scope.row.payType == null" type="primary">未支付</el-tag>
          <el-tag v-if="scope.row.payType === 0" type="primary">余额支付</el-tag>
          <el-tag v-if="scope.row.payType === 1" type="primary">支付宝</el-tag>
          <el-tag v-if="scope.row.payType === 2" type="primary">微信</el-tag>
          <el-tag v-if="scope.row.payType === 3" type="primary">银联</el-tag>
          <el-tag v-if="scope.row.payType === 4" type="primary">其它</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="支付状态">
        <template #default="scope">
              <el-tag v-if="scope.row.status === 0" type="primary">未支付</el-tag>
              <el-tag v-if="scope.row.status === 1" type="success">已支付</el-tag>
              <el-tag v-if="scope.row.status === 2" type="info">已发货</el-tag>
              <el-tag v-if="scope.row.status === 3" type="danger">已收货</el-tag>
              <el-tag v-if="scope.row.status === 4" type="danger">退货退款</el-tag>
              <el-tag v-if="scope.row.status === 5" type="danger">退换货</el-tag>
              <el-tag v-if="scope.row.status === 6" type="danger">仅退款</el-tag>
              <el-tag v-if="scope.row.status === 7" type="danger">售后</el-tag>
              <el-tag v-if="scope.row.status === 8" type="danger">其它</el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column prop="appointmentStatus" label="预约状态">-->
      <!--  <template #default="scope">-->
      <!--    <el-tag v-if="scope.row.appointmentStatus === 0" type="primary">已预约</el-tag>-->
      <!--    <el-tag v-if="scope.row.appointmentStatus === 2" type="success">服务中</el-tag>-->
      <!--    <el-tag v-if="scope.row.appointmentStatus === 1" type="info">已取消</el-tag>-->
      <!--    <el-tag v-if="scope.row.appointmentStatus === 3" type="danger">已完成</el-tag>-->
      <!--  </template>-->
      <!--</el-table-column>-->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="getInfoById(scope.row.id)">查看</el-button>
          <el-button size="small" @click="sendGoods(scope.row.id)">发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-row class="row-bg" justify="space-evenly">
        <el-col :span="6">
          <el-pagination layout="prev, pager, next" :total="tableDate.total" :page-size="tableDate.pageSize"
                         @current-change="getTableDate"/>
        </el-col>
      </el-row>
    </template>
  </el-card>


  <!-- START 查看详情对话框 -->
  <el-dialog v-model="infoVisible" align-center>
    <el-descriptions
        title="订单详情"
        direction="vertical"
        :column="4"
        size="large"
        border
    >
      <el-descriptions-item label="订单编号">{{ showData.id }}</el-descriptions-item>
      <el-descriptions-item label="用户ID">{{ showData.userId }}</el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">{{ showData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="快递单号">{{ showData.express }}</el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <!--<el-tag size="small">{{ showData.payType }}</el-tag>-->
        <el-tag v-if="showData.payType == null" type="primary">未支付</el-tag>
        <el-tag v-if="showData.payType === 0" type="primary">余额支付</el-tag>
        <el-tag v-if="showData.payType === 1" type="primary">支付宝</el-tag>
        <el-tag v-if="showData.payType === 2" type="primary">微信</el-tag>
        <el-tag v-if="showData.payType === 3" type="primary">银联</el-tag>
        <el-tag v-if="showData.payType === 4" type="primary">其它</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支付状态" :span="2">
        <!--<el-tag size="small">{{ showData.status }}</el-tag>-->
        <el-tag v-if="showData.status === 0" type="primary">未支付</el-tag>
        <el-tag v-if="showData.status === 1" type="success">已支付</el-tag>
        <el-tag v-if="showData.status === 2" type="info">已发货</el-tag>
        <el-tag v-if="showData.status === 3" type="danger">已收货</el-tag>
        <el-tag v-if="showData.status === 4" type="danger">退货退款</el-tag>
        <el-tag v-if="showData.status === 5" type="danger">退换货</el-tag>
        <el-tag v-if="showData.status === 6" type="danger">仅退款</el-tag>
        <el-tag v-if="showData.status === 7" type="danger">售后</el-tag>
        <el-tag v-if="showData.status === 8" type="danger">其它</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="地址的ID" :span="2">{{ showData.addrId }}</el-descriptions-item>
      <el-descriptions-item label="那一会地址" :span="2">{{ showData.addrDetail }}</el-descriptions-item>
      <el-descriptions-item label="商品">
        <el-table :data="showData.orderDetails" style="width: 100%">
          <el-table-column prop="goodsId" label="商品名称"/>
          <el-table-column prop="count" label="商品数量"/>
          <el-table-column prop="price" label="商品价格"/>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="infoVisible = false">取消</el-button>
        <!--<el-button type="primary" @click="subUpdate">提交</el-button>-->
      </div>
    </template>
  </el-dialog>
  <!-- END 查看详情对话框 -->
</template>

<script setup>

import {ref} from "vue";
import orderApi from "@/api/OrderApi.js";
import {ElMessage} from "element-plus";

const tableDate = ref({
  pageNum: 1,
  pageSize: 5,
  total: 1,
  list: []
})

// 搜索相关信息
const condition = ref({})

const infoVisible = ref(false)
const showData = ref({})

const getTableDate = (pageNum) => {
  orderApi.getList(condition.value, pageNum, 5)
      .then(resp => {
        if (resp.code === 10000) {
          tableDate.value = resp.data
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 通过id查询订单
const getInfoById = (id) => {
  orderApi.getInfoById(id)
      .then(resp => {
        if (resp.code === 10000) {
          showData.value = resp.data
          infoVisible.value = true
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 发货
const sendGoods = (id) => {
  orderApi.sendGoods(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          getTableDate(tableDate.value.pageNum)
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

getTableDate(1)
</script>

<style scoped>

</style>
